<template>
  <!--  水管-->
  <div class="box-view">
    <el-row :gutter="15">
      <el-col :span="4" class="left_org">
        <!-- 搜索框 -->
        <organization-tree v-model="deptTree" ref="deptTree" :changeOnSelect='true' placeholder="选择管养单位"
                           @change="selectOrgHandel"></organization-tree>
      </el-col>
      <el-col :span="20">
        <div class="page">
          <div style="padding: 20px 0px 0px 20px">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item @click.native="breadClick(item.deptTreeIdList)" v-for="item in deptTree.breadList"
                                  :key="item.name">
                <el-button type="text" class="bread_button_text">{{item.deptName}}</el-button>
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <el-divider></el-divider>
          <div class="s-table">

            <!-- 条件筛选 -->
            <div class="page_filter">
              <el-input v-model="form.queryString" style="width: 300px" clearable placeholder="时间、操作人...">
                <template slot="prepend">查询条件</template>
              </el-input>
              <el-select v-model="form.checkStatus" clearable placeholder="检测状态">
                <el-option
                  v-for="item in EnumCheckStatusList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code">
                </el-option>
              </el-select>

              <el-button class="common_btn-defalut" icon="el-icon-search" @click="form.page=1;queryList()">搜索
              </el-button>
            </div>
            <div class="page_main">
              <el-button icon="el-icon-plus" @click.stop="handleAdd" class="common_btn-small">新增检查</el-button>
              <!-- table -->
              <div class="common_btnBox">
                <i class="iconfont iconzongshu icon-size"></i>
                总数：{{form.total}}
              </div>
              <el-table
                :data="tableList"
                :row-key="getRowKeys"
                :expand-row-keys="expands"
                @expand-change="queryWaterInfoList"
                border>
                <el-table-column type="expand">
                  <template slot-scope="scope" >
                    <!-- 分段表单 -->
                    <div class="tableChild">
                      <el-input v-model="form2.name" style="width: 300px;height: 50px;margin-right: 15px" clearable placeholder="管段名称查询...">
                      </el-input>
                      <el-button class="common_btn-defalut" icon="el-icon-search" @click="getQueryPointList()">搜索
                      </el-button>
                      <el-table ref="table" :data="scope.row.children || []" border
                                v-loading="loading"        height="450">
                        <el-table-column prop="name"  min-width="140" header-align="center"
                                         align="center"
                                         label="管段名称"></el-table-column>

                        <el-table-column prop="caliber" show-overflow-tooltip width="80" header-align="center"
                                         align="center"
                                         label="管径(mm)"></el-table-column>
                        <el-table-column prop="length" show-overflow-tooltip width="80" header-align="center"
                                         align="center"
                                         label="长度(m)"></el-table-column>
                        <el-table-column prop="pipeUseTypeName" show-overflow-tooltip width="80" header-align="center"
                                         align="center"
                                         label="材质"></el-table-column>

                        <el-table-column label="结构性缺陷" header-align="center" align="center">
                          <el-table-column prop="avgS" label="平均值S" width="60">
                            <template slot-scope="scope">
                              {{scope.row.avgS!==null?scope.row.avgS:'待检测' }}
                            </template>
                          </el-table-column>
                          <el-table-column prop="maxS" label="最大值S" width="60">
                            <template slot-scope="scope">
                              {{scope.row.maxS!==null?scope.row.maxS:'待检测' }}
                            </template>
                          </el-table-column>
                          <el-table-column prop="structureDefectLevelName" label="缺陷等级" width="70">
                            <template slot-scope="scope">
                              {{scope.row.structureDefectLevelName?scope.row.structureDefectLevelName:'待检测' }}
                            </template>
                          </el-table-column>
                          <el-table-column prop="sm" label="缺陷密度" width="70">
                            <template slot-scope="scope">
                              {{scope.row.sm!==null?scope.row.sm:'待检测' }}
                            </template>
                          </el-table-column>

                          <el-table-column prop="ri" label="修复指数" width="70">
                            <template slot-scope="scope">
                              {{scope.row.ri!==null?scope.row.ri:'待检测' }}
                            </template>
                          </el-table-column>

                        </el-table-column>
                        <el-table-column label="功能性缺陷" header-align="center" align="center">
                          <el-table-column prop="avgY" label="平均值Y" width="60">
                            <template slot-scope="scope">
                              {{scope.row.avgY!==null?scope.row.avgY:'待检测' }}
                            </template>
                          </el-table-column>
                          <el-table-column prop="maxY" label="最大值Y" width="60">
                            <template slot-scope="scope">
                              {{scope.row.maxY!==null?scope.row.maxY:'待检测' }}
                            </template>
                          </el-table-column>
                          <el-table-column prop="functionalDefectLevelName" label="缺陷等级" width="70">
                            <template slot-scope="scope">
                              {{scope.row.functionalDefectLevelName?scope.row.functionalDefectLevelName:'待检测' }}
                            </template>
                          </el-table-column>
                          <el-table-column prop="ym" label="缺陷密度" width="70">
                            <template slot-scope="scope">
                              {{scope.row.ym!==null?scope.row.ym:'待检测' }}
                            </template>
                          </el-table-column>

                          <el-table-column prop="mi" label="养护指数" width="70">
                            <template slot-scope="scope">
                              {{scope.row.mi!==null?scope.row.mi:'待检测' }}
                            </template>
                          </el-table-column>

                        </el-table-column>
                        <el-table-column prop="checkTime" width="140" label="检测日期" align="center" header-align="center">
                          <template slot-scope="scope">
                            {{scope.row.checkTime | formatTimer }}
                          </template>
                        </el-table-column>
                        <el-table-column label="操作" width="150" fixed="right" align="center" header-align="center">
                          <template slot-scope="scope">
                            <button type="text"
                                    class="btn_edit"
                                    @click="handleEditWaterItem(scope.row)">
                              填写分段检查
                            </button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>

                  </template>
                </el-table-column>
                <el-table-column prop="checkStatus" min-width="100" label="检测状态" align="center">
                  <template slot-scope="scope">
                    <el-tag :style="scope.row.checkStatus| detectionColor" style="color: white" size="medium">
                      {{scope.row.checkStatusName}}
                    </el-tag>

                  </template>
                </el-table-column>
                <el-table-column prop="roadName" min-width="110" show-overflow-tooltip label="道路名称"></el-table-column>
                <el-table-column prop="deptTreeName" min-width="140" show-overflow-tooltip
                                 label="主管单位"></el-table-column>
                <el-table-column prop="testTreeName" min-width="130" show-overflow-tooltip
                                 label="检测单位"></el-table-column>
                <el-table-column prop="pipeName" min-width="130" label="管线名称"></el-table-column>
                <el-table-column prop="pipeType" width="110" label="管线类型">
                  <template slot-scope="scope">
                    <el-tag :style="scope.row.pipeType| pipeTypeColor" style="color: white" size="medium">
                      {{scope.row.pipeTypeName}}
                    </el-tag>

                  </template>
                  pipeTypeColor
                </el-table-column>
                <el-table-column prop="length" width="100" label="管线长度"></el-table-column>
                <el-table-column prop="num" width="100" label="管段数量"></el-table-column>

                <el-table-column prop="updateTime" width="140" show-overflow-tooltip label="更新日期">
                  <template slot-scope="scope">
                    {{scope.row.updateTime|formatTimer()}}
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="230" >
                  <template slot-scope="scope">

                    <button type="text" class="btn_add" @click="handleImport(scope.row,'chick-item')">
                      导入缺陷
                    </button>
                    <button type="text" class="btn_add" @click="handleImport(scope.row,'chick')">
                      导入分段参数
                    </button>
                    <button type="text" class="btn_add" @click="calcPipeCheck(scope.row)">
                      计算
                    </button>
                    <button v-if="scope.row.checkStatus==3" type="text" class="btn_add" @click="handleEdit(scope.row)">
                      填写结论
                    </button>
                    <button v-if="scope.row.checkStatus==4" type="text" class="btn_add" @click="handleEdit(scope.row)">
                      查看结论
                    </button>
                    <button v-if="scope.row.checkStatus>2" type="text" class="btn_add"
                            @click=" queryCheckPointList(scope.row.id)">
                      查看缺陷统计表
                    </button>
                    <!--            <button type="text" class="btn_add" @click="handleSee(scope.row)">查看</button>-->
                  </template>
                </el-table-column>
              </el-table>
              <!-- 分页器 -->
              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                             :current-page="form.page"
                             :page-size="form.pageSize"    :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
              layout="sizes, prev, pager, next"  :total="form.total">
              </el-pagination>
            </div>

            <!--   结论弹窗-->
            <el-drawer
              title="检查结论"
              direction="rtl"
              :visible.sync="isConclusionDrawer"
              :close-on-click-modal="false"
              size="64%">
              <div class="drawerContent_Water">
                <h3 style="font-size: 200%;font-weight: 600;text-align: center;margin-bottom: 10px"
                >检查结论</h3>
                <table>
                  <tr align="center" valign="middle">
                    <td>项目</td>
                    <td :colspan="4">监测结论</td>
                  </tr>
                  <tr align="center" valign="middle">
                    <td>管道总长度（m）</td>
                    <td :colspan="4">{{conclusionList.length}}</td>

                  </tr>
                  <tr align="center" valign="middle">
                    <td>管道数量（段）</td>
                    <td :colspan="4">{{conclusionList.num}}</td>

                  </tr>
                  <tr align="center" valign="middle">
                    <td :rowspan="7">管道结构性状况</td>

                    <td>管段缺陷等级</td>
                    <td>个数</td>
                    <td>管道累计长度（m）</td>
                    <td>占检测总长百分比（%）</td>
                  </tr>
                  <tr align="center" valign="middle" v-for="(item,index) in conclusionList.structureDefectList"
                      :key="'count'+index">
                    <td>{{item.defectLevelName}}</td>
                    <td>{{item.count}}</td>
                    <td>{{item.length}}</td>
                    <td>{{item.percentage}}</td>
                  </tr>
                  <tr align="center" valign="middle">
                    <td>管道总体结构性状况</td>
                    <td :colspan="4">
                      <el-input type="textarea" :rows="3" v-model="conclusionList.structureExplanation"></el-input>
                    </td>
                  </tr>
                  <tr align="center" valign="middle">
                    <td>修复建议</td>
                    <td :colspan="4">
                      <el-input type="textarea" :rows="3" v-model="conclusionList.structureAdvice"></el-input>
                    </td>
                  </tr>

                  <tr align="center" valign="middle">
                    <td :rowspan="7">管道功能性状况</td>

                    <td>管段缺陷等级</td>
                    <td>个数</td>
                    <td>管道累计长度（m）</td>
                    <td>占检测总长百分比（%）</td>
                  </tr>
                  <tr align="center" valign="middle" v-for="(item,index) in conclusionList.functionalDefectList"
                      :key="index">
                    <td>{{item.defectLevelName}}</td>
                    <td>{{item.count}}</td>
                    <td>{{item.length}}</td>
                    <td>{{item.percentage}}</td>
                  </tr>
                  <tr align="center" valign="middle">
                    <td>管道总体功能性状况</td>
                    <td :colspan="4">
                      <el-input type="textarea" :rows="3" v-model="conclusionList.functionalExplanation"></el-input>
                    </td>
                  </tr>
                  <tr align="center" valign="middle">
                    <td>养护建议</td>
                    <td :colspan="4">
                      <el-input type="textarea" :rows="3" v-model="conclusionList.functionalAdvice"></el-input>
                    </td>
                  </tr>
                </table>


              </div>
              <div class="demo-drawer__footer" v-if="isEmpower" style="margin-top: 10px">
                <el-button class="common_btn" @click="isConclusionDrawer = false;">取消</el-button>
                <el-button class="common_btn-defalut" type="primary" @click="updateConclusionWater">确定</el-button>
              </div>

            </el-drawer>
            <!--编辑子分段-->
            <el-drawer
              title="分段检查表"
              direction="rtl"
              :visible.sync="isWaterDrawer"
              :close-on-click-modal="false"
              size="64%">
              <div class="drawerContent_Water">
                <h3 style="font-size: 200%;font-weight: 600;text-align: center;margin-bottom: 10px"
                >{{waterName}}检查表</h3>
                <table>
                  <tr align="center" valign="middle">
                    <td class="td_10">名称</td>
                    <td class="td_23">{{tableListWater.name}}</td>
                    <td class="td_10">起点名称</td>
                    <td class="td_23">{{tableListWater.startName}}</td>
                    <td class="td_10">终止名称</td>
                    <td class="td_23"> {{tableListWater.endName}}</td>
                  </tr>
                  <tr align="center" valign="middle">
                    <td class="td_10">管段类型</td>
                    <td class="td_23">{{tableListWater.pipeTypeName}}</td>
                    <td class="td_10">地区重要性</td>
                    <td class="td_23">
                      <el-select v-model="tableListWater.k" clearable placeholder="请选择地区重要性参数">
                        <el-option
                          v-for="item in EnumPipeKList"
                          :key="item.code"
                          :label="item.name"
                          :value="item.code">
                        </el-option>
                      </el-select>
                    </td>
                    <td class="td_10">土质影响</td>
                    <td class="td_23">
                      <el-select v-model="tableListWater.t" clearable placeholder="请选择土质影响参数">
                        <el-option
                          v-for="item in EnumPipeTList"
                          :key="item.code"
                          :label="item.name"
                          :value="item.code">
                        </el-option>
                      </el-select>
                    </td>
<!--                    <td class="td_10">起点埋深</td>-->
<!--                    <td class="td_23">{{tableListWater.startLand}}</td>-->
<!--                    <td class="td_10">终点埋深</td>-->
<!--                    <td class="td_23"> {{tableListWater.endLand}}</td>-->
                  </tr>
                  <tr align="center" valign="middle">
                    <td class="td_10">管段长度</td>
                    <td class="td_23">{{tableListWater.length}}</td>
                    <td class="td_10">管段材质</td>
                    <td class="td_23">{{tableListWater.pipeUseTypeName}}</td>
                    <td class="td_10">管段直径</td>
                    <td class="td_23"> {{tableListWater.caliber}}</td>
                  </tr>

                  <tr align="center" valign="middle">
                    <td class="td_10">检测日期</td>
                    <td class="td_23">
                      <el-date-picker style="width: 200px"
                                      v-model="tableListWater.checkTime"
                                      type="date"
                                      placeholder="选择时间">
                      </el-date-picker>
                    </td>
                    <td class="td_10">检测地点</td>
                    <td class="td_23" colspan="3">
                      <el-input v-model="tableListWater.address" placeholder="请输入检测地点"></el-input>
                    </td>
                  </tr>
                  <tr align="center" valign="middle">
                    <td style="height: 30px;line-height: 30px;font-weight: 600" colspan="6">缺陷列表</td>


                  </tr>
                </table>
                <table class="tableBuilding">
                  <tr>
                    <th>检测方向</th>
                    <th>距离</th>
                    <th>缺陷长度</th>
                    <th>缺陷类型</th>
                    <th>具体缺陷类型</th>
                    <th>缺陷等级</th>
                    <th>描述</th>
                    <th>图片</th>
                    <th class="operationAdd">
                      <el-button icon="el-icon-plus" @click="addDefectList()" class="common_btn-small">添加</el-button>
                    </th>
                  </tr>
                  <tr v-for="(child,index) in tableListWater.defectList" :key="index">
                    <td>
                      <el-select v-model="child.direction" clearable placeholder="请选择检测方向">
                        <el-option
                          v-for="item in EnumCheckDirectionList"
                          :key="item.code"
                          :label="item.name"
                          :value="item.code">
                        </el-option>
                      </el-select>
                    </td>
                    <td>
                      <el-input v-model="child.startLength" type="number" placeholder="请输入距离"></el-input>
                    </td>
                    <td>
                      <el-input v-model="child.length" type="number" placeholder="请输入缺陷长度"></el-input>
                    </td>
                    <td>
                      <el-select v-model="child.defectType" clearable placeholder="请选择缺陷类型"
                                 @change="selectDefectType(child.defectType,index)">
                        <el-option
                          v-for="item in EnumDefectTypeList"
                          :key="item.code"
                          :label="item.name"
                          :value="item.code">
                        </el-option>
                      </el-select>
                    </td>
                    <td>
                      <el-select v-if="child.defectType == 1" v-model="child.defectChildType" clearable
                                 @change="changeChildType(child.defectChildType,index)"
                                 placeholder="具体缺陷类型">
                        <el-option
                          v-for="item in EnumStructureDefectTypeList"
                          :key="item.code"
                          :label="item.name"
                          :value="item.code">
                        </el-option>
                      </el-select>
                      <el-select v-else v-model="child.defectChildType" clearable
                                 @change="changeChildType(child.defectChildType,index)"
                                 placeholder="具体缺陷类型">
                        <el-option
                          v-for="item in EnumFunctionalDefectTypeList"
                          :key="item.code"
                          :label="item.name"
                          :value="item.code">
                        </el-option>
                      </el-select>
                    </td>
                    <td>
                      <el-select v-if="levelTwo.indexOf(child.defectChildType) !=-1" v-model="child.level" clearable
                                 placeholder="请选择缺陷等级">
                        <el-option
                          v-for="item in EnumDefectLevelList2"
                          :key="item.code"
                          :label="item.name"
                          :value="item.code">
                        </el-option>
                      </el-select>
                      <el-select v-else-if="levelThree.indexOf(child.defectChildType) !=-1" v-model="child.level"
                                 clearable placeholder="请选择缺陷等级">
                        <el-option
                          v-for="item in EnumDefectLevelList3"
                          :key="item.code"
                          :label="item.name"
                          :value="item.code">
                        </el-option>
                      </el-select>
                      <el-select v-else v-model="child.level" clearable placeholder="请选择缺陷等级">
                        <el-option
                          v-for="item in EnumDefectLevelList"
                          :key="item.code"
                          :label="item.name"
                          :value="item.code">
                        </el-option>
                      </el-select>
                    </td>
                    <td>
                      <el-input v-model="child.explanation" type="textarea" :rows="3" placeholder="请输入描述"></el-input>

                    </td>
                    <td>
                      <upload-img v-model="child.picList" :limit="1" :size-limit="1"
                                  ref="uploadPic"></upload-img>
                    </td>
                    <td>
                      <button class="btn_delete" @click="deleteDefectList(index)">删除</button>
                    </td>

                  </tr>
                </table>
                <table class="tableBuilding">
                  <tr align="center" valign="middle">
                    <th colspan="5">结构性缺陷</th>
                    <th colspan="5">功能性缺陷</th>
                  </tr>
                  <tr align="center" valign="middle">
                    <td>平均值S</td>
                    <td>最大值Smax</td>
                    <td>缺陷等级</td>
                    <td>缺陷密度</td>
                    <td>修复指数RI</td>
                    <td>平均值Y</td>
                    <td>最大值Ymax</td>
                    <td>缺陷等级</td>
                    <td>缺陷密度</td>
                    <td>养护指数MI</td>
                  </tr>
                  <tr align="center" valign="middle">
                    <td>{{tableListWater.avgS}}</td>
                    <td>{{tableListWater.maxS}}</td>
                    <td>{{tableListWater.structureDefectLevelName}}</td>
                    <td>{{tableListWater.sm}}</td>
                    <td>{{tableListWater.ri}}</td>
                    <td>{{tableListWater.avgY}}</td>
                    <td>{{tableListWater.maxY}}</td>
                    <td>{{tableListWater.functionalDefectLevelName}}</td>
                    <td>{{tableListWater.ym}}</td>
                    <td>{{tableListWater.mi}}</td>

                  </tr>
                  <tr>
                    <td colspan="5">
                      <el-input v-model="tableListWater.structureExplanation" type="textarea" :rows="3"
                                placeholder="结构性缺陷综合状况评价"></el-input>
                    </td>
                    <td colspan="5">
                      <el-input v-model="tableListWater.functionalExplanation" type="textarea" :rows="3"
                                placeholder="功能性缺陷综合状况评价"></el-input>
                    </td>
                  </tr>
                </table>
                <div style="width: 100%;text-align: right">
                  <el-button class="common_btn-calc" @click="calcCheck()" style="margin-top: 10px">计算</el-button>
                </div>


              </div>
              <div class="demo-drawer__footer" v-if="isEmpower" style="margin-top: 10px">
                <el-button class="common_btn" @click="isWaterDrawer = false;">取消</el-button>
                <el-button class="common_btn-defalut" type="primary" @click="addWater()">确定</el-button>
              </div>

            </el-drawer>
            <!--    新增检查-->
            <el-dialog :title="dialogTitle" :visible.sync="isAddDialog" :close-on-click-modal="false" width="40%">
              <div>
                <el-form>
                  <el-row :gutter="20">
                    <el-col :span="16">
                      <el-form-item label="选择管理单位">
                        <organization v-model="currentRow.deptTreeId" :changeOnSelect='true' placeholder="选择管理单位"
                                      @change="changePipeInfo()"
                        ></organization>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="管线选择">
                        <el-select v-model="currentRow.pipeInfoId" clearable placeholder="选择管线">
                          <el-option
                            v-for="item in pipeInfoList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>

              </div>
              <span slot="footer" class="dialog-footer">
        <el-button class="common_btn-white" @click="isAddDialog=false">取消</el-button>
        <el-button class="common_btn-defalut" type="primary" @click="addSubmit">确定</el-button>
      </span>
            </el-dialog>
            <!--查看缺陷统计表-->
            <el-dialog title="查看缺陷统计表" :visible.sync="isPointDialog" :close-on-click-modal="false" width="50%">
              <div>
                <el-table
                  :data="checkPointList"
                  border>
                  <el-table-column type="index" width="80" show-overflow-tooltip
                                   label="序号"></el-table-column>
                  <el-table-column prop="defectTypeName" width="110" show-overflow-tooltip
                                   label="缺陷类型"></el-table-column>
                  <el-table-column prop="defectChildTypeName" width="120" show-overflow-tooltip
                                   label="具体缺陷类型"></el-table-column>
                  <el-table-column prop="caliber" width="100" show-overflow-tooltip
                                   label="管径(mm)"></el-table-column>
                  <el-table-column prop="pipeUseTypeName" width="110" show-overflow-tooltip
                                   label="材质"></el-table-column>
                  <el-table-column prop="length" width="100" show-overflow-tooltip
                                   label="检测长度"></el-table-column>
                  <el-table-column prop="length" width="100" show-overflow-tooltip
                                   label="缺陷距离"></el-table-column>
                  <el-table-column prop="length" width="140" show-overflow-tooltip
                                   label="缺陷名称及位置"></el-table-column>
                  <el-table-column prop="levelName" width="100" show-overflow-tooltip
                                   label="缺陷等级"></el-table-column>


                </el-table>

              </div>
              <span slot="footer" class="dialog-footer">
        <el-button class="common_btn-defalut" @click="isPointDialog=false">关闭</el-button>
      </span>
            </el-dialog>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-dialog :title="showImportTitle" :visible.sync="showImport" :close-on-click-modal="false" width="520px">
      <p v-if="showImportTitle ==='导入分段参数'" style="margin-bottom: 1vw;text-align: center;color: red">提示：地区重要性和土质影响是计算等级的重要参数，请严格按模板中的注意事项正确填写！</p>
      <el-form ref="newUploadForm" label-width="80px"
               label-position="right">
        <el-row>
          <el-col :span="18">
            <el-form-item label="上传文件" prop="fileName">
              <el-input v-model="fileName" :readonly='true' placeholder="文件名" style="width:250px;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-upload class="upload-demo" ref="upload" action="doUpload" :limit="1" :file-list="fileList"
                       :before-upload="beforeUpload">
              <el-button slot="trigger" type="primary" plain style="color:white;background:#1990FE">选择导入文件
              </el-button>
            </el-upload>
          </el-col>
        </el-row>
        <el-row>
          <el-button icon="el-icon-download" @click.stop="handleOutFile" size="mini" type="primary"
                     style="background:#1990FE ">导入模板下载
          </el-button>
        </el-row>
        <div class="upload_res_view" v-if="importFenDuan.successCount || importFenDuan.errorCount">
          <div style="padding: 20px">
            文件导入完成！数据总数：{{importFenDuan.errorCount + importFenDuan.successCount}}<p style="color: #0bb20c">
            导入成功：{{importFenDuan.successCount}}条;</p>
            <p style="color: #ff4d51">导入失败:{{importFenDuan.errorCount}}条</p>
          </div>
          <a style="margin-left: 20px" v-if="importFenDuan.errorFileUrl"
             :href="constUrl + importFenDuan.errorFileUrl">
            <el-button icon="el-icon-download" style="background:#e91e63;color:#ffffff">失败文件下载</el-button>
          </a>
        </div>
      </el-form>
      <!-- 操作按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button class="common_btn-white" @click="cancleSub()">取消</el-button>
        <el-button class="common_btn-defalut" type="primary" @click="validateFormFile">确定</el-button>
      </span>
    </el-dialog>
    <x-loading v-show="isLoading"></x-loading>
  </div>

</template>
<script>
  import UploadImg from "@/components/upload-img";
  import ItemMixins from "@/views/Pipeline/item.mixins";
  import Organization from '@/components/organization-unit/all'
  import XLoading from '@/components/animation/x-loading.vue'
  import constUrl from '@/services/env'
  import {
    calcCheck,

    checkCalc,
    checkQueryList,
    importCheck,
    importCheckItem,
    queryCheckPointList,
    queryPointList,
    querySelectList,
    sheetAdd,
    updateCheck,
    updateCheckItem
  } from '@/services/model/pipeline'
  import {getMoreDictData} from '@/services/model/common'
  import Format from '@/utils/format'
  import OrganizationTree from '@/components/organization-tree/all'
  import Enums from '@/utils/enums'

  export default {
    mixins: [ItemMixins,Enums],
    components: {
      Organization,
      OrganizationTree,
      UploadImg,
      XLoading,
    },
    data() {
      return {constUrl,

        // 展开行,数组形式
        expands: [],
        childrenList:[],
        showImportTitle: '',
        importFenDuan: {//导入对象
          errorFileUrl: '',//导入失败返回的文件地址
          successCount: '',//导入成功数量
          errorCount: '',//导入失败数量
        },
        form2:{},
        fileList: [],
        fileName: '',
        showImport: false,
        checkPointList: [],
        isPointDialog: false,
        isLoading: false,
        EnumCheckStatusList: [],
        conclusionList: [],
        isConclusionDrawer: false,
        EnumCheckDirectionList: [],
        levelTwo: [7],
        levelThree: [3, 8, 9, 16],
        EnumFunctionalDefectTypeList: [],
        EnumStructureDefectTypeList: [],
        EnumDefectLevelList: [],
        EnumDefectLevelList2: [],
        EnumDefectLevelList3: [],
        EnumDefectTypeList: [],
        EnumPipeTList: [],
        EnumPipeKList: [],
        pipeInfoList: [],
        tableListWater: {}, //分段列表
        isWaterDrawer: false, //分段编辑弹窗
        waterName: '',//分段标题
        waterItemId: '',
        isLook: false, //查看状态
        pipeTypes: 0, //判断水管线类型
        isDisabled: false,//是否可选
        stepActive: 1,
        isAddDialog: false,//排序弹窗
        formList: {},
        deptTree: {
          breadList: [],//面包屑
          deptTreeId: '',
        },
        baseUnitSelectList: [],//基础信息列表
        EnumPipeTypeList: [],//水管类型
        isEmpower: true,
        loading: false,
        form: {
          page: 1,
          pageSize: 10,
          total: 0,
        },
        pipeTypeName: '',

        tableList: [],
        isShowDialog: false,
        isShowDrawer: false, // 是否显示弹窗
        currentRow: {
          pipeType: 1
        }, // 新增数据
      }
    },
    computed: {

      // 弹窗的title
      pipeType() {
        return parseInt(this.$route.name)
      },
      // 弹窗的title
      dialogTitle() {
        return this.currentRow.id ? '编辑检查' : '新增检查'
      },

    },
    filters: {
      // 时间格式化
      formatTimer(timer) {
        return Format(new Date(timer), 'yyyy年MM月dd日')
      },
      // 检测状态颜色


    },
    methods: {
      // 每行的唯一key值 用其id表示
      getRowKeys(row) {
        return row.id;
      },
      handleOutFile() { // 文件导出
        let href
        if (this.showImportTitle == '导入缺陷') {
          href = this.$router.resolve({path: '/statics/缺陷导入模板.xls'}).href
        } else {
          href = this.$router.resolve({path: '/statics/检测分段参数导入模板.xls'}).href
        }

        window.open(href)
      },
      cancleSub() { // 取消上传
        this.showImport = false
        this.fileName = ''
        this.newUploadForm = {}
      },
      //导入缺陷
      handleImport(row, name) {
        if (name == 'chick-item') {
          this.showImportTitle = '导入缺陷'
        } else {
          this.showImportTitle = '导入分段参数'
        }
        this.newUploadForm = {}
        this.newUploadForm.pipeCheckId = row.id
        this.showImport = true
        this.newUploadForm.pipeType = row.pipeType
        this.$nextTick(() => {
          this.$refs.newUploadForm.clearValidate()
        })
      },
      // 确认导入文件
      validateFormFile() {
        if (this.fileName === '') {
          this.$message({
            message: '请选择要上传的文件！',
            type: 'warning',
            showClose: true
          })
          return false
        }
        this.isLoading = true
        let action
        if (this.showImportTitle == '导入缺陷') {
          action = importCheckItem
        } else {
          action = importCheck
        }
        let fileFormData = new FormData()
        fileFormData.append('uploadFile', this.files, this.fileName) // 上传的文件
        action(fileFormData, this.newUploadForm.pipeCheckId).then(res => { // 上传请求
          if (res.code === 200) {
            this.importFenDuan.errorFileUrl = res.data.errorFileUrl || ''
            this.importFenDuan.successCount = res.data.successCount || 0
            this.importFenDuan.errorCount = res.data.errorCount || 0
            this.$notify({
              type: 'success',
              title: '提示',
              message: this.importFenDuan.errorFileUrl ? '部分导入成功，请点击下载文件查看失败的内容！' : '全部导入成功'
            })
            this.fileName = ''
          }
        })
        this.isLoading = false
      },
      beforeUpload(file) { // 上传前 文件校验

        this.files = file
        this.fileName = file.name
        return false // 返回false不会自动上传
      },
      //查看缺陷统计表
      async queryCheckPointList(id) {
        let res = await queryCheckPointList({id})
        this.checkPointList = res.data
        this.isPointDialog = true
      },
      //分段确定
      async updateConclusionWater() {
        if (this.conclusionList.checkStatus == 3) {
          let res = await updateCheck(this.conclusionList)
          if (res.code === 200) {
            this.$notify({
              type: 'success',
              title: '提示',
              message: '填写成功'
            })
            this.queryList()
          }
        }
        this.isConclusionDrawer = false
      },

      async calcPipeCheck(row) {
        let res = await checkCalc({id: row.id})
        if (res.code === 200) {
          this.$notify({
            type: 'success',
            title: '提示',
            message: '计算'
          })
          this.queryList()
        }
      },
      async addWater() {
        let res = await updateCheckItem(this.tableListWater)
        if (res.code === 200) {
          this.$notify({
            type: 'success',
            title: '提示',
            message: '添加成功'
          })
          this.queryList()
          this.isWaterDrawer = false
        }
      },
      //分段计算
      async calcCheck() {
        let res = await calcCheck(this.tableListWater)
        this.tableListWater.avgS = res.data.avgS
        this.tableListWater.maxS = res.data.maxS
        this.tableListWater.functionalDefectLevelName = res.data.functionalDefectLevelName
        this.tableListWater.sm = res.data.sm
        this.tableListWater.ri = res.data.ri
        this.tableListWater.avgY = res.data.avgY
        this.tableListWater.maxY = res.data.maxY
        this.tableListWater.structureDefectLevelName = res.data.structureDefectLevelName
        this.tableListWater.ym = res.data.ym
        this.tableListWater.mi = res.data.mi
      },
      //判断等级
      changeChildType(code, index) {
        this.tableListWater.defectList[index].level = null
      },

      //判断具体缺陷类型
      selectDefectType(code, index) {
        this.tableListWater.defectList[index].level = null
        this.tableListWater.defectList[index].defectChildType = null
      },
      // 新增检查按钮
      handleAdd() {
        this.currentRow = {}
        this.isAddDialog = true
        this.currentRow.pipeType = this.pipeType
      },

      //新增缺陷列表
      addDefectList() {
        this.tableListWater.defectList.push({
          level: null,
          defectChildType: null
        })
      },
      // 删除当前缺陷列表
      deleteDefectList(index) {
        this.tableListWater.defectList.splice(index, 1)
      },
      //编辑分段
      async handleEditWaterItem(row) {
        this.tableListWater = JSON.parse(JSON.stringify(row))
        this.waterName = this.tableListWater.name
        this.isWaterDrawer = true
      },
      //查询管线
      async changePipeInfo() {
        let {data} = await querySelectList(this.currentRow)
        this.pipeInfoList = data
      },
      //新增检查
      async addSubmit() {
        let res = await sheetAdd(this.currentRow)
        if (res.code === 200) {
          this.$notify({
            type: 'success',
            title: '提示',
            message: '添加成功！'
          })
          this.isAddDialog = false
          this.queryList()
        }
      },

      //水管编辑
      async waterInfoUpdate() {
        let res = await waterInfoUpdate(this.formList)
        if (res.code === 200) {
          this.$notify({
            type: 'success',
            title: '提示',
            message: '更新成功'
          })
          this.queryList()
          this.isShowDialog = false

        }
      },

      //水管新增
      async waterInfoAdd() {
        let res = await waterInfoAdd(this.formList)
        if (res.code === 200) {
          this.$notify({
            type: 'success',
            title: '提示',
            message: '添加成功'
          })
          this.queryList()
          this.isShowDialog = false

        }
      },
      //组织机构组件回调
      selectOrgHandel() {
        this.$forceUpdate()
        this.form.deptTreeId = this.deptTree.deptTreeId
        this.form.page = 1
        this.queryList()
      },
      //更新通用信息
      async pipeInfoUpdate() {
        let res = await pipeInfoUpdate(this.currentRow)
        if (res.code === 200) {
          this.$notify({
            type: 'success',
            title: '提示',
            message: '更新成功'
          })
          this.queryList()
          this.isShowDrawer = false
        }
      },
      //新增通用信息
      async pipeInfoAdd() {
        let res = await pipeInfoAdd(this.currentRow)
        if (res.code === 200) {
          this.$notify({
            type: 'success',
            title: '提示',
            message: '添加成功'
          })
          this.queryList()
          this.isShowDrawer = false
        }
      },
      //修改
      handleEdit(item) {
        this.isConclusionDrawer = true
        this.conclusionList = item
      },
      //查看
      handleSee(item) {
        this.stepActive = 2
        this.isDisabled = true
        this.currentRow = item
        this.isShowDrawer = true
        this.isLook = true
      },
      // 展开分段
      async queryWaterInfoList(row, list) {
        this.form2={}
        this.loading = true
        var that = this;
        if (list.length) {
          that.expands = [];
          if (row) {
            that.expands.push(row.id); // 每次push进去的是每行的ID
          }
        } else {
          that.expands = []; // 默认不展开
        }


        // item不存在，则当前是关闭

     this.form2.id=row.id
        const {data} = await queryPointList(this.form2)
        row.children = data
        this.loading = false
      },
      async getQueryPointList(){
        this.loading = true
        const {data} = await queryPointList(this.form2)
        this.childrenList = data
       this.tableList.filter((x,index)=>{
         if(x.id === this.form2.id){
           this.tableList[index].children=this.childrenList
         }
       })
        this.loading = false
      },
      // 通用获取多个枚举方法 enumName是枚举名称数组，model是枚举名称对于的list名称数字
      // 如 enumName = ['枚举1','枚举2'] ; model = ['枚举1对应的变量名称','枚举2对应的变量名称']
      async queryMoreDict(enumNameList, modelList) {
        let enumName = enumNameList.join(',')
        const {data} = await getMoreDictData({enumName})
        for (let i = 0; i < enumNameList.length; i++) {
          data.map(x => {
            if (x.enumName === enumNameList[i]) {
              let modelName = modelList[i]
              this[modelName] = x.list || []
            }
          })
        }

      },
      /*基础单位选择列表*/

      // 获取当前的序号
      getIndex(index) {
        let param = (this.form.page - 1) * this.form.pageSize + index + 1
        return param
      },
      // 分页大小改变
      handleSizeChange(val) {
        this.form.pageSize = val
        this.queryList()
      },
      // 当前页码改变
      handleCurrentChange(val) {
        this.form.page = val
        this.queryList()
      },

      //列表数据
      async queryList() {
        this.isLoading = true
        this.form.pipeType = this.pipeType
        let data = await checkQueryList(this.form)
        this.tableList = data.data.records
        this.form.total = data.data.total
        this.isLoading = false

      },
      addEnum() {
        this.EnumDefectLevelList2 = this.EnumDefectLevelList.slice(0, 2)
        this.EnumDefectLevelList3 = this.EnumDefectLevelList.slice(0, 3)
      }

    },
    mounted() {
      this.queryList()
      this.queryDictList(['EnumPipeType', 'EnumPipeK', 'EnumPipeT', 'EnumDefectType', 'EnumFunctionalDefectType', 'EnumFunctionalDefectType', 'EnumCheckDirection', 'EnumDefectLevel', 'EnumStructureDefectType', 'EnumPipeCheckStatus'],
        ['EnumPipeTypeList', 'EnumPipeKList', 'EnumPipeTList', 'EnumDefectTypeList', 'EnumFunctionalDefectTypeList', 'EnumFunctionalDefectTypeList', 'EnumCheckDirectionList', 'EnumDefectLevelList', 'EnumStructureDefectTypeList', 'EnumCheckStatusList'])
      .then(res => {this.addEnum()})
    },
    activated() {

    }
  }
</script>

<style lang="less" scoped>
  .drawerContent {
    width: 90%;
    margin: 5% auto;
    margin-bottom: 0;
    height: 780px;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .drawerContent_Water {
    width: 96%;
    margin: 5% auto;
    margin-bottom: 0;
    max-height: 760px;
    overflow-y: auto;
    /*background: red;*/
    overflow-x: hidden;
  }

  .drawerContent::-webkit-scrollbar {
    width: 0px;
    /*height: 4px;*/
  }

  /*设置按钮样式*/
  .demo-drawer_footer {
    width: 100%;
    height: 5% !important;
    text-align: right;
    box-sizing: border-box;
    padding-right: 10%;
  }

  /*  两列输入框*/

</style>
<style lang="less" scoped>
  .drawerContent_Water {
    width: 96%;
    margin: 5% auto;
    margin-bottom: 0;
    max-height: 760px;
    overflow-y: auto;
    overflow-x: hidden;

    table {
      width: 100%;
    }

    tr {
      width: 100%;
      height: 40px;
      line-height: 40px;
      border-right: 1px solid gray;
    }

    td, th {
      border: 1px solid gray;
      border-right: 0px;
      height: 40px;
      line-height: 40px;
      display: table-cell;
      vertical-align: middle;
      align-items: center;

      /deep/ .el-input input {
        border: 0px;
      }
    }

    th {
      border-top: 0px;
    }

    .td_10 {
      width: 10%;
    }

    .td_23 {
      width: 23%;
    }

  }

  .tableBuilding {
    border: 0px;
  }

  .operationAdd /deep/ .common_btn-small {
    background: #1990FE !important;
    color: white !important;
    border-radius: 0px;
  }

  /*面包屑*/
  .bread_button_text {
    padding-right: 0px;
    font-size: 18px;
    font-weight: 600;
    color: #1990FE;
  }

  .el-table {
    /deep/ .el-table {
      th {
        background-color: #0DC26B !important;
      }
    }

    /deep/ .el-table .cell {
      padding: 5px !important;
    }

    /deep/ .el-table ::-webkit-scrollbar {
      height: 8px;
    }
  }


  /deep/ .el-table__expanded-cell {
    background: #dcdcdc !important;
  }

  .page_filter /deep/ .el-input-group__prepend {
    background: #2196F3;
    color: white;
    padding: 0 20px;
    font-size: 100%;
    font-weight: 500;
    border: 1px solid #2196F3;
  }
</style>

